<template>
          <div class="usage-record-list" >
        <div class="usage-record-list-item" v-for="item in usageRecordList" :key="item">
          <img :src="item.cover_img" alt="" />
          <div class="usage-record-list-item-data">
            <div class="usage-record-list-item-data-top">
              <span class="area" :title="item.province_name">{{item.province_name}}</span>
              <img src="@/assets/images/line.png" class="line" alt=""  />
              <span class="school-name"  :title="item.org_name"> {{item.org_name}} </span>
            </div>
            <div class="usage-record-list-item-data-middle">
              <span>{{item.res_name}}</span>
            </div>
            <div class="usage-record-list-item-data-bottom">
              <span>{{item.res_type_name}}</span>
              <p>{{item.time_format_str}}</p>
            </div>
          </div>
        </div>

      </div>
</template>
<script setup>
import {ref,onMounted} from 'vue'
import { getUsageRecord } from "@/api/api.js";


const usageRecordList = ref([
  {
    area:'江苏省',
    user:'南京师范大学附属中学',
    subject:'霸王龙',
    feature:'3D百科',
    time:'刚刚'
  },
  {
    area:'浙江省',
    user:'宁波镇海中学',
    subject:'霸王龙',
    feature:'3D百科',
    time:'1分钟前'
  },
  {
    area:'上海',
    user:'华东师范大学第二附属中学',
    subject:'霸王龙',
    feature:'3D百科',
    time:'1日前'
  },
  {
    area:'黑龙江省',
    user:'哈尔滨师范大学附属中学',
    subject:'霸王龙',
    feature:'3D百科',
    time:'1周前'
  },
  {
    area:'黑龙江省',
    user:'哈尔滨师范大学附属中学',
    subject:'霸王龙',
    feature:'3D百科',
    time:'1周前'
  },
])

onMounted(()=>{
  getUsageRecord().then((res)=>{
    usageRecordList.value = res.data
  })
})
</script>
<style lang="scss" scoped>
.usage-record-list::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.usage-record-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 3.07% 2.23%;
  overflow: scroll;
  pointer-events: all;
  &-item {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 23.86%;
    padding: 0 1.86%;
    padding-right: 4.97%;
    border-radius: 2px;
    backdrop-filter: blur(10px);
    background: rgba(74, 78, 80, 0.07);
    margin-bottom: 5px;
    > img {
      width: 28.76%;
      border: 1px solid rgb(24, 254, 254);
      border-radius: 5px;
    }
    &-data {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 65.24%;
      height: 77.92%;
      // background-color: rgb(24, 254, 254);
      margin-left: 3.91%;
      &-top {
        display: flex;
        align-items: center;
        height: 33.33%;
        color: rgb(255, 255, 255);
        font-family: SiYuanHeiTi-CN;
        font-size: 14px;
        font-weight: 700;
      }
      &-middle {
        color: rgb(255, 255, 255);
        font-family: SiYuanHeiTi-CN;
        font-size: 14px;
        font-weight: 400;
      }
      &-bottom {
        display: flex;
        justify-content: space-between;
        > span {
          color: rgb(190, 196, 199);
          font-family: SiYuanHeiTi-CN;
          font-size: 10px;
          font-weight: 700;
        }
        > p {
          color: rgb(24, 254, 254);
          font-family: SiYuanHeiTi-CN;
          font-size: 10px;
          font-weight: 700;
        }
      }
    }
  }
}
.line {
  width: 0.96%;
  // height: 100%;
  padding: 0 2.88%;
  // border: 2px solid rgb(24, 254, 240);
}
.area{
  max-width: 40%;
  white-space: nowrap; /* 强制文本不换行 */
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.school-name{
  width: 55%; /* 设置宽度 */
  white-space: nowrap; /* 强制文本不换行 */
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
}
</style>